<!--
 * @Author: wangming
 * @Date: 2020-09-07 10:27:56
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-18 09:37:45
 * @Description: file content
-->
<template>
  <draggable
    :delay="50"
    :forceFallback="true"
    chosen-class="drawing-chosen"
    drag-class="drawing-drag"
    @add="handleAdd"
    class="drawing-board box ova pt24"
    group="form"
    :animation="200"
    :list="list"
    tag="el-row"
    handle=".mover"
  >
    <component
      :configIndex="index"
      :configList="list"
      :is="i.__config.type === 'rowLayout' ? 'rowLayout' : 'formItemDesgic'"
      isEdit
      v-for="(i, index) in list"
      :itemChecked="i.key === getModelForm.key"
      :class="{
        active: i.key === getModelForm.key,
      }"
      @deltag="deltag(index)"
      @click.native.stop="handleAdd({ newIndex: index, type: 'click' })"
      :key="i.key"
      :config="i"
      :form="formData"
    ></component>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";
import { mapActions, mapGetters } from "vuex";
import rowLayout from "../__layouts/index.vue";
import formItemDesgic from "../formItem_desgic/index.vue";
export default {
  components: { draggable, formItemDesgic, rowLayout },
  computed: {
    ...mapGetters(["getModelForm"]),
  },
  destroyed() {
    this.setModelForm({});
  },
  data() {
    return {
      formData: {},
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    move(e, v) {
      //表单内部不能该拖拽表单
      if (
        e.draggedContext.element.__config.type !== "formItem" &&
        e.to?.dataset?.key === "layout"
      ) {
        return false;
      } else {
        return true;
      }
    },
    ...mapActions(["setModelForm"]),
    async handleAdd({ newIndex }) {
      let form = this.list[newIndex];
      if (form.key !== this.getModelForm.key) {
        this.setModelForm({});
        await this.$nextTick();
      }
      form.isFormLayout = false;
      this.$store.commit("changeFormList", []);
      this.setModelForm(form);
    },
    deltag(index) {
      //删除选中项
      if (this.list[index].key === this.getModelForm.key) {
        this.setModelForm({});
      }
      this.list.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>
